<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>圣杯布局示例</title>
   <style>
       body {
           margin: 0;
           font-family: Arial, sans-serif;
       }
       .container {
           display: flex;
           flex-wrap: wrap;
           width: 100vw;
           height: 100vh;
       }
       .left, .right {
           flex: 1;
           padding: 10px;
           box-sizing: border-box;
       }
       .center {
           flex: 2;
           padding: 10px;
           box-sizing: border-box;
       }
       @media (max-width: 768px) {
           .left, .right {
               flex: 100%;
           }
           .center {
               flex: 0;
           }
       }
   </style>
</head>
<body>
   <div class="container">
       <div class="left">
           <h2>左部</h2>
           <p>这里是左部的内容。</p>
       </div>
       <div class="center">
           <h2>中间</h2>
           <p>这里是中间的内容。</p>
       </div>
       <div class="right">
           <h2>右部</h2>
           <p>这里是右部的内容。</p>
       </div>
   </div>
</body>
</html>